<template>
  <div class="app-container">
    <quiz-paper :visible="visible" :list="list" @submit="handleSubmit" />
  </div>
</template>

<script>
import QuizPaper from '@/views/components/QuizPaper'
import { check } from '@/api/quiz'
export default {
  name: 'Quiz',
  components: { QuizPaper },
  data() {
    return {
      visible: true,
      list: [
        {
          problem: 'qqq111',
          radio: '',
          correct: 'aaa',
          options: [
            'aaa',
            'bbb',
            'ccc',
            'ddd'
          ]
        },
        {
          problem: 'qqq222',
          radio: 'bbb',
          correct: 'bbb',
          options: [
            'aaa',
            'bbb',
            'ccc',
            'ddd'
          ]
        },
        {
          problem: 'qqq333',
          radio: 'ddd',
          correct: 'aaa',
          options: [
            'aaa',
            'bbb',
            'ccc',
            'ddd'
          ]
        }
      ]
    }
  },
  methods: {
    handleSubmit(res) {
      check(res).then(response => {
        const { data } = response
        this.$router.push({ path: '/review-quiz/analyze', query: { data }})
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
